import React from 'react';
import { Tabs, Menu, Dropdown, Icon } from 'antd';
import { isNumber } from '../../util/typeUtil';
import { observer } from 'mobx-react';
import $ from 'jquery';
import { UrlDocker } from '..';
import { listStore } from '../../stores/list';
import { CustomPageStore } from '../../stores/custompage';
import { TreeStore } from '../../stores/tree';
import ReplyStore from '../../stores/reply';

export interface TopTabProps {
  key: string;
  title: string;
  groups?: TopTabProps[];
}

export interface TopTabsProps {
  topTabs?: TopTabProps[];
  modeName: string;
  onTabClick: (key: string) => void;
  activeKey?: string;
  activeDropKey?: string;
  isCube: boolean;
  url: string;
  Search: listStore;
  Tree: TreeStore;
  Reply: ReplyStore;
  Custompage: CustomPageStore;
}

@observer
export default class TopTabs extends React.Component<TopTabsProps, any> {
  componentDidMount() {
    this.setToptabHeight();
  }

  componentWillReceiveProps() {
    this.setToptabHeight();
  }

  onDropTabClick = ({ key }: any) => {
    this.props.onTabClick(key);
  }
  fixedHeight = () => {
    const $this = $('#container');
    const $Tab = $this.find('.cube-card-toptabs');
    const $iframe = $this.find(`#tabcontentviewframe`);
    try {
      $iframe && $Tab && $iframe.height($this.height() - $Tab.height() - $Tab.offset().top);
    } catch (e) { }
  }
  setToptabHeight = () => {
    $('.cube-toptab-container').height($('#container').height() - $('.ant-tabs-bar').height())
  }

  render() {
    const { onTabClick, activeKey, modeName, topTabs = [], activeDropKey } = this.props;
    const iframeKey = `${activeDropKey ? activeDropKey : activeKey}iframe`;
    return (
      <div className="cube-card-toptabs-wrap" ref="_topWrap">
        {
          (topTabs.length >= 1) && <Tabs className="cube-card-toptabs" type="card" onTabClick={onTabClick} activeKey={activeKey ? activeKey : '0'}>
            <Tabs.TabPane tab={modeName} key="0" />
            {
              topTabs.map(({ key, title, groups }) => {
                if (isNumber(key)) {
                  return (
                    <Tabs.TabPane key={key} tab={title} />
                  )
                } else {
                  let activeTitle = '';
                  const dropMenu = (
                    groups && <Menu onClick={this.onDropTabClick}>
                      {
                        groups && groups.map(({ key: key1, title: title1 }) => {
                          if (key1 == activeDropKey) {
                            activeTitle = title1;
                          }
                          return (
                            <Menu.Item key={key1} title={title1}>{title1}</Menu.Item>
                          )
                        })
                      }
                    </Menu>
                  )
                  return (
                    <Tabs.TabPane key={key} tab={
                      <Dropdown overlay={dropMenu} trigger={['hover']}>
                        <span className="ant-dropdown-link">
                          <span id={key}>{activeTitle ? activeTitle : title}</span> <Icon type="down" />
                        </span>
                      </Dropdown>
                    } />
                  )
                }
              })
            }
          </Tabs>
        }
        <div className="cube-card-content" style={{ display: `${activeKey == '0' || !activeKey ? 'inline' : 'none'}` }}>
          {this.props.children}
        </div>
        <iframe onLoad={this.fixedHeight.bind(this, iframeKey)} src="" id="tabcontentviewframe"
          name='tabcontentviewframe' width="100%" height='100%' frameBorder={0} style={{ display: 'none' }} />
        <div className="cube-toptab-container" style={{ display: this.props.isCube ? 'block' : 'none' }}>
          {this.props.isCube && <UrlDocker
            url={this.props.url || ''}
            Search={(this.props.Search.changeIsInTree(), this.props.Search)}
            Tree={this.props.Tree.tree || (this.props.Tree.tree = new TreeStore(), this.props.Tree.tree.isInTree = true, this.props.Tree.tree)}
            Reply={this.props.Reply}
            ViewCustomPage={this.props.Custompage}
          />}
        </div>
      </div>
    )
  }
}
